<template>
  <!-- 资讯评论审核 -->
  <div>
    <!-- 头部 -->
    <div class="header">
      <!-- 批量删除按钮 -->
      <el-button type="danger" size="small" @click="deleteComments">批量删除</el-button>
      <!-- 关键字输入框 -->
      <el-input v-model="keyword" placeholder="请输入关键字" size="small" clearable style="width:200px"></el-input>
      <!-- 搜索按钮 -->
      <el-button type="primary" size="small" @click="searchData">搜索</el-button>
    </div>
    <!-- 内容部分 -->
    <el-table :data="tableData" @selection-change="handleSelectionChange" size='small' style="width:100%;height=10px">
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column type="index" label="序号" align="center"></el-table-column>
      <el-table-column prop="comment" label="评论内容" align="center"></el-table-column>
      <el-table-column prop="userId" label="评论人编号" align="center"></el-table-column>
      <el-table-column prop="articleId" label="咨询编号" align="center"></el-table-column>
      <el-table-column prop="commentTime" label="评论时间" align="center">
        <template slot-scope="scope">
          <div>
            {{scope.row.commentTime | fmtDate_global}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
            <div>
              <el-tag type="danger" v-if="scope.row.status == '不通过'" size="small"  effect="dark">不通过</el-tag>
              <el-tag type="success" v-else-if="scope.row.status == '通过' || scope.row.status == '审核通过'" size="small"  effect="dark" >通过</el-tag>
              <el-tag  size="small" v-else effect="dark" >未审核</el-tag>
            </div>
          </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="deleteComment(scope.row.id)">删除</el-button>
            <span v-if="scope.row.status == '未审核'">
              <el-button type="text"  size="small" @click="passApply(scope.row.id)">通过</el-button>
              <el-button type="text" size="small" @click="outApply(scope.row.id)">不通过</el-button>
            </span>
          </template>
        </el-table-column>
    </el-table>
    <!-- 底部分页 -->
    <div class="paginetion">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[2,4,6,10]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="this.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {get,post} from '@/utils/request'
import a from 'file-saver';
export default {
  data() {
    return {
      //头部输入框关键字内容
      keyword:'',
      //table中的数据
      tableData:[],
      // 选中的数据列表
      multipleSelection:[],
      //当前页面
      currentPage:1,
      //页面大小
      pageSize:10,
      //搜索框中搜索的内容
      queryData:{},
      //数据总数
      total:0,
    };
  },
  computed: {},
  methods: {
    //搜索
    searchData(){
      let data = {
        keywords:this.keyword
      }
      this.querydata = data
      this.currentPage = 1
      this.getTableData()
    },
    //获取被选中的数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //批量删除事件
    async deleteComments(){
      if(!this.multipleSelection){
        return
      }else{
        const deleteList = []
        for(let i in this.multipleSelection){
          deleteList.push(this.multipleSelection[i].id)
        }
        let data ={
          ids:deleteList
        }
        await post('/comment/batchDelete',data)
        this.getTableData()
      }
      
    },
    //删除一条评论
    async deleteComment(id){
        await get('/comment/deleteById',{id})
        this.getTableData()
    },
    //获取table中的数据
    async getTableData(){
      let data = {
        page:this.currentPage,
        pageSize:this.pageSize
      }
      data = {...data,...this.queryData}
      let res = await get('/comment/pageQuery',data)
      this.total = res.data.total
      this.tableData = res.data.list
      
    },
    //页面大小改变
    handleSizeChange(val){
      this.pageSize = val
      this.currentPage = 1
      this.getTableData()
    },
    //换页
    handleCurrentChange(val){
      this.currentPage = val
      this.getTableData()
    },
    //通过申请
    async passApply(id){
        await get('/comment/check',{id,status:'审核通过'})
        this.getTableData()
    },
    //不通过申请
    async outApply(id){
      await get('/comment/check',{id,status:'审核未通过'})
      this.getTableData()
    },
  },
  created() {
    this.getTableData()
  },
  mounted() {},
};
</script>
<style scoped>
.paginetion {
    /* margin-top: 20px;
    position: fixed;
    bottom: 40px;
    right: 10px; */
    margin-top: 10px;
    float: right;
  }
  .header{
    margin-bottom: 30px;
  }
</style>